<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <ul>
      <li><a v-on:click="fetchmydata('http://localhost:8080/api/v1/news/getNewsList?startid=0')" target="_blank">loadyidongyi</a> </li>
      <li><a v-on:click="fetchmydata('http://localhost:8000/api/v1/days?uCode=201799&yMonth=2017-12')" target="_blank">loadwebhr</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>


    </ul>

    <ul id="example-2">
      <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }} - {{ item.order }}
      </li>
    </ul>

    <section>
      <ul>
        <li  class="category_left_li"   >
          <section>
            <img src="../assets/logo.png"  class="category_icon">
            <span>hello</span>
          </section>
          <section>
            <span class="category_count">3</span>
            <svg   width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow" >
              <path d="M0 0 L6 4 L0 8"  stroke="#bbb" stroke-width="1" fill="none"/>
            </svg>
          </section>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    fetchmydata: function (url) {
      fetch(url, {
        method: 'get',
        headers: {
          "Content-type": "application/json; charset=UTF-8"
        }
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (data) {
          console.log('Request succeeded with JSON response', data);
        })
        .catch(function (error) {
          console.log('Request failed', error);
        });
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App s!',
      parentMessage: 'Parent',
      items: [
        { message: 'Foo', order: '1'},
        { message: 'Bar', order: '1'},
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.category_left_li{
  padding:0 0.5rem;
  .category_icon {
    width: .1rem;
    height: .1rem;
    vertical-align: middle;
    margin-right: .2rem;
  }
}



</style>
